<script lang="ts" setup>
import aj from './components/aj-tree.vue'
import yxaj from './components/yx-tree.vue'
import ajwsgl from './components/ajws.vue'
import yspwjgl from './components/yspwjgl.vue'
import Collapse from './components/collapse.vue'
import wsjzglService from '@/api/wsjzgl'
import yspglService from '@/api/yspgl'
import { ref, nextTick } from 'vue'
import { useMainStore } from '@/store/main'
import { ElMessage } from 'element-plus'

// 获取ref
const ajwsglRef = ref()
const yspwjglRef = ref()
const ajRef = ref()
const yspRef = ref()
const store = useMainStore()

const cylx = ref('aj')
const headerClickChange = (lx: string) => {
  cylx.value = lx
}
// 案卷传递过来方法
const nodeClick = (data: any, mlList: any[]) => {
  store.saveNodeTreeData(data)
  if (data.cj === '1') {
    getWjList(mlList)
  } else if (data.cj === '2') {
    getWjList(mlList)
  } else {
    ajwsglRef.value.getWjxqxx([])
  }
}

// 更新当前预览的文书页码
const updatePage = (wjbh: string) => {
  const i = wjList.value.findIndex((wj) => wj.wjbh === wjbh)
  ajwsglRef.value.indexChange(i)
}

// 案卷复卷列表
const wjList = ref<any[]>([])
const getWjList = (mlList: any[]) => {
  // 以一个卷为单位连续查看
  const params = {
    ajbh: store.$state.nodeTreeData?.ajbh,
  }
  wsjzglService
    .queryWjList(params)
    .then((res) => {
      nextTick(() => {
        const wjListArr: any[] = []
        // 按目录顺序给文件排序
        mlList?.forEach((ml) => {
          res.data.forEach((wj) => {
            if (wj.mlbh === ml.bh) {
              wjListArr.push(wj)
            }
          })
        })
        wjList.value = wjListArr
        ajwsglRef.value.getWjxqxx(wjListArr)
        const i = mlList?.findIndex((ml) => ml.bh === store.$state.nodeTreeData?.bh)
        if (i === 1) {
          ajwsglRef.value.indexChange(mlList[0].wjsl)
        } else if (i > 1) {
          ajwsglRef.value.indexChange(
            mlList.slice(0, i).reduce((pre, next) => {
              return pre + next.wjsl
            }, 0),
          )
        }
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 放大操作
const enlargeClick = () => {
  ajwsglRef.value.enlargeClick()
}
// 缩小操作
const narrowClick = () => {
  ajwsglRef.value.narrowClick()
}

// 上一页
const lastPageClick = () => {
  ajwsglRef.value.lastPageClick()
}

const nextPageClick = () => {
  ajwsglRef.value.nextPageClick()
}

const mode = ref<string>('contain')
const changeMode = () => {
  ajwsglRef.value.changeMode(mode.value)
}

const prevDisabled = ref(false)
const setPrev = (val: boolean) => {
  prevDisabled.value = val
}

const nextDisabled = ref(false)
const setNext = (val: boolean) => {
  nextDisabled.value = val
}

// 音视频目录列表
const getYspList = () => {
  const params = {
    dabh: store.$state.nodeTreeData?.dabh,
    mlbh: store.$state.nodeTreeData?.bh,
  }
  yspglService
    .getYspmlxx(params)
    .then((res) => {
      nextTick(() => {
        yspwjglRef.value.getWjxqxx(res.data)
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 获取图片目录列表
const getPhotoList = () => {
  const params = {
    dabh: store.$state.nodeTreeData?.dabh,
    mlbh: store.$state.nodeTreeData?.bh,
  }
  yspglService
    .getZpmlxx(params)
    .then((res) => {
      nextTick(() => {
        yspwjglRef.value.getWjxqxx(res.data)
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 音视频图片传递过来方法
const yspNodeClick = (data: any) => {
  store.saveNodeTreeData(data)
  if (data.cj === 1 || !data.cj) {
    yspwjglRef.value.getWjxqxx([])
    return
  }
  // 判断
  if (data.fbh === 'gd0020002' || data.fbh === 'gd0020001') {
    getYspList()
  } else {
    getPhotoList()
  }
}
</script>
<template>
  <div class="container">
    <div class="gacy-header">
      <button
        class="header-text"
        :class="cylx === 'aj' ? 'header-avtive' : ''"
        @click="headerClickChange('aj')"
      >
        案卷
      </button>
      <button
        class="header-text"
        :class="cylx === 'yx' ? 'header-avtive' : ''"
        @click="headerClickChange('yx')"
      >
        音像
      </button>
    </div>
    <div class="top" v-if="cylx === 'aj'">
      <div class="reduce" title="缩小" @click="narrowClick"></div>
      <div class="enlarge" title="放大" @click="enlargeClick"></div>
      <select placeholder="请选择" class="select" v-model="mode" @change="changeMode">
        <option label="适合页面" value="contain"></option>
        <option label="适合页宽" value="100% auto"></option>
        <!-- <option label="200%" :value="200"></option>
        <option label="175%" :value="175"></option>
        <option label="150%" :value="150"></option>
        <option label="125%" :value="125"></option>
        <option label="100%" :value="100"></option>
        <option label="75%" :value="75"></option>
        <option label="50%" :value="50"></option>
        <option label="25%" :value="25"></option> -->
      </select>
      <div class="divider"></div>
      <div class="page" :class="{ disabled: prevDisabled }" @click="lastPageClick">上一页</div>
      <div class="page" :class="{ disabled: nextDisabled }" @click="nextPageClick">下一页</div>
    </div>
    <div
      class="content"
      :style="{ height: cylx === 'aj' ? 'calc(100% - 78px)' : 'calc(100% - 42px)' }"
    >
      <div class="box">
        <Collapse>
          <aj v-if="cylx === 'aj'" ref="ajRef" @nodeClick="nodeClick" @updatePage="updatePage" />
          <yxaj v-else ref="yspRef" @nodeClick="yspNodeClick"></yxaj>
        </Collapse>
        <div class="center">
          <ajwsgl v-if="cylx === 'aj'" ref="ajwsglRef" @prev="setPrev" @next="setNext" />
          <yspwjgl v-else ref="yspwjglRef"></yspwjgl>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .gacy-header {
    padding: 10px 10px 5px;
    .header-text {
      color: #4a76ab;
      cursor: pointer;
      border-radius: 5px;
    }
    .header-text + .header-text {
      margin-left: 10px;
    }
    .header-avtive {
      color: #fff;
      background-color: #3c89d0;
    }
  }
  .top {
    display: flex;
    align-items: center;
    height: 35px;
    .select {
      border-radius: 3px;
      margin-right: 20px;
      border: 1px solid #d4e1ef;
      width: 106px;
      height: 24px !important;
      font-size: 16px;
      color: #4f5e7b;
      line-height: 24px;
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      background: no-repeat scroll right 4px center transparent;
      background-image: url(@/assets/images/select.png);
      padding-right: 18px;
      padding-left: 10px;
      &::after {
        display: none;
      }
    }
    .reduce {
      margin-left: 15px;
    }
    .reduce,
    .enlarge,
    .divider {
      margin-right: 15px;
    }
    .reduce,
    .enlarge {
      margin-bottom: 4px;
    }
    .divider {
      width: 1px;
      height: 16px;
      background-color: #d4e1ef;
    }
    .page {
      color: #1890ff;
      cursor: pointer;
      margin-right: 15px;
      &.disabled {
        color: rgba(0, 0, 0, 0.25);
        pointer-events: none;
      }
    }
  }
  .content {
    width: 100%;
    padding: 10px;
    background-color: #ecf1fa;
    .left {
      // width: 20%;
      width: 350px;
      height: 100%;
      // border: 1px solid red;
      position: relative;
      background-color: #fff;
    }
    .box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      position: relative;
    }
    .center {
      // width: 54%;
      flex: 1;
      flex-shrink: 0;
      background-color: #fff;
    }
  }
}
</style>
